<template>
	<view class="app-container">
		<view class="page-head">
			<uni-icons type="arrow-left" color="white" size="30" v-on:click="backPackage"></uni-icons>
		</view>

		<view class="logistics-box">
			<text class="logistics-state">{{ detail.logistics_state }}</text>

			<view class="address-box">
				<view class="address-icon">
					<van-image width="1.4rem" height="1.4rem" src="/static/owo/position.png" />
				</view>
				<view class="user-info-box">
					<view class="user-info white-content">
						<text class="user-name">{{ detail.address.username }}</text>
						<text class="user-phone">{{ detail.address.phone }}</text>
					</view>
					<view class="address-info white-content">
						<text>{{ detail.address.province }} {{ detail.address.region }}
							{{ detail.address.address }}</text>
					</view>
				</view>
			</view>

			<view class="gift-box">
				<view class="gift-item" v-for="(item, index) in detail.detail.items" :key="index">
					<image :src="item.image" style="width: 162rpx;height: 162rpx;border-radius: 8rpx;"></image>
					<text class="white-content title">{{ item.name }}</text>
					<view style="width: 100%;margin: 10rpx 0;" class="white-content">
						<text>
							x{{item.count}}
						</text>

					</view>
				</view>
			</view>
		</view>

		<view class="message-box gray-content">
			<view class="message-item">
				<text class="label">数量</text>
				<text class="value">{{ detail.count }}</text>
			</view>
			<view class="message-item">
				<text class="label">合计</text>
				<text class="value">￥{{ detail.total_price }}</text>
			</view>
			<view class="message-item">
				<text class="label">物流单号</text>
				<view class="value">
					<text>{{ detail.logistics || '暂无' }}</text>
					<van-image v-if="detail.logistics" width="28rpx" height="28rpx" src="/static/owo/copy-icon.png"
						v-on:click="copyLogistics"></van-image>
				</view>
			</view>
			<view class="message-item">
				<text class="label">申请时间</text>
				<text class="value">{{ detail.created_at }}</text>
			</view>
		</view>

		<view class="empty-page"></view>

	</view>
</template>

<script>
	import moment from 'moment'
	import {
		loadPackageApplyDetail
	} from '@/api/package';

	export default {
		data() {
			return {
				id: null,
				detail: {
					address:{
						username:"",
						phone:"",
						items:[]
					}
				}
			}
		},
		onLoad: async function(option) {
			this.id = option.id || 1
			await this.loadPackageApplyDetail()
		},
		methods: {
			async loadPackageApplyDetail() {
				const params = {
					id: this.id
				}
				const res = await loadPackageApplyDetail(params)
				const detail = res.data || {}
				detail.total_price = (Number(detail.total_price || 0) / 100).toFixed(2);

				const timeObj = moment(detail['created_at']);
				detail['created_at'] = timeObj.format('YYYY-MM-DD HH:mm:ss')
				this.detail = detail
				if (!this.detail.detail) {
					this.detail.detail = {}
				}
				if (!this.detail.detail.items) {
					this.detail.detail.items = []
				}
			},
			backPackage() {
				uni.navigateBack({
					delta: 1
				})
			},
			copyLogistics() {
				uni.setClipboardData({
					data: this.detail.logistics, // 设置要复制的文本内容
					success(res) {
						uni.showToast({
							title: '物流单号已复制',
							icon: 'none',
							duration: 3000
						})
					},
					fail(err) {
						console.error("复制失败", err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "src/static/scss/common";

	.app-container {
		flex-direction: column;
	}

	.logistics-box {
		// background: #0A050B;
		//background: linear-gradient(to bottom, rgba(35, 30, 52, 100), rgba(48, 16, 54, 100)); /* 红色向黄色渐变 */

		display: flex;
		flex-direction: column;
		padding: 0 24rpx;

		.logistics-state {
			padding-left: 30rpx;
			color: #FDE29B;
		}
	}

	.address-box {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		background-color: #42424E;
		border-radius: 4rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0;
		color:#ffffff;

		.address-icon {
			margin: 30rpx 0 30rpx 30rpx;
		}

		.user-info-box {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;

			.user-info {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.address-info {}
		}
	}

	.title {
		width: 160rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.user-name {
		font-size: 40rpx;
	}

	.user-phone {
		margin-left: 20rpx;
	}

	.gift-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.gift-item {
			margin: 10rpx 30rpx 10rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.message-box {
		display: flex;
		flex-direction: column;
		background-color: #42424E;
		border: 1rpx solid #555;
		border-radius: 4rpx;
		margin: 0 24rpx;
		padding-top: 24rpx;

		.message-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 24rpx;
			color:#999999;
			.label {
				margin-left: 30rpx;
			}

			.value {
				margin-right: 30rpx;

				display: flex;
				flex-direction: row;
				align-items: center;

				.value-icon {
					margin-left: 10rpx;
				}
			}
		}
	}
</style>